import React from 'react';
import { Card } from 'antd';
import { ProTable, ProColumns } from '@ant-design/pro-table';
import { getVehicleTeamList } from '../../request/vehicle';
import type { VehicleTeam } from '../../types/vehicleTeam';

const VehicleTeamPage: React.FC = () => {
  const columns: ProColumns<VehicleTeam>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '车队名称',
      dataIndex: 'name',
      key: 'name',
    },
  ];

  return (
    <div>
      <div style={{ padding: '24px 0' }}>
        <Card 
          bordered={false} 
          style={{ 
            borderRadius: '8px',
            boxShadow: '0 2px 12px rgba(0, 0, 0, 0.05)'
          }}
          bodyStyle={{ padding: '24px' }}
        >
          <ProTable<VehicleTeam>
            columns={columns}
            request={async (params) => {
              const response = await getVehicleTeamList({
                current: params.current,
                pageSize: params.pageSize,
              });
              
              return {
                data: response.data.rows,
                success: response.code === '0000',
                total: response.data.total,
              };
            }}
            rowKey="id"
            pagination={{
              pageSize: 10,
            }}
            search={false}
            options={{
              setting: false,
              fullScreen: false,
              reload: false,
              density: false,
            }}
            bordered
          />
        </Card>
      </div>
    </div>
  );
};

export default VehicleTeamPage;